<template>
  <div class="">
    <div>
      <headers index = "5"></headers>
    </div>
    <div style="padding:1% 10%;box-sizing: border-box;min-height: 80vh;">
      <el-descriptions class="margin-top" :title="$t('userinfo')" :column="2"  border>
          <template slot="extra">

            <el-button type="primary"  @click="handleClose" size="small">{{$t('Modifying_User_Information')}}</el-button>

            <el-button type="primary" @click="payClose" size="small">{{$t('recharge')}}</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
                <!-- 昵称 -->
              {{$t('nickname')}}
            </template>
            {{userInfo.nickname}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 座机号码 -->
              {{$t('self_code')}}
            </template>
            {{userInfo.code}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 个人清关码 -->
              {{$t('tel')}}
            </template>
            {{userInfo.tel}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{$t('mobile')}}
            </template>
            {{userInfo.mobile}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 韩文名 -->
              {{$t('name_h')}}
            </template>
            {{userInfo.korean_name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 英文名 -->
              {{$t('name_e')}}
            </template>
            {{userInfo.en_name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 个人清关码 -->
              {{$t('customs')}}
            </template>
            {{userInfo.customs}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 编号 -->
              {{$t('email')}}
            </template>
            {{userInfo.email}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 地址 -->
              {{$t('address')}}
            </template>
            {{userInfo.address}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 邮编 -->
              {{$t('zip_code')}}
            </template>
            {{userInfo.zip_code}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <!-- 账户余额 -->
              {{$t('balance')}}
            </template>
            {{userInfo.balance?userInfo.balance:"-"}}
          </el-descriptions-item>
        </el-descriptions>
    </div>
    <el-dialog
      :title="$t('Modifying_account_passwords')"
      :visible.sync="RegistrationShow"
      width="60%"
      :before-close="handleClose">
      <div>
        <el-form  :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item :label="$t('nickname')" prop="nickname">
            <!-- 昵称 -->
            <el-input :placeholder="$t('nickname')" v-model="ruleForm.nickname"></el-input>
          </el-form-item>
          <el-form-item :label="$t('email')" prop="email">
            <!-- 邮箱 -->
            <el-input :placeholder="$t('email')" v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item :label="$t('mobile')" prop="mobile">
            <!-- 电话号 -->
            <el-input type="text" @input="(e)=>{ruleForm.mobile = e.replace(/[^0-9]/g,'')}" :placeholder="$t('mobile')" v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item :label="$t('tel')" prop="tel">
            <!-- 座机号 -->
            <el-input type="text" @input="(e)=>{ruleForm.tel = e.replace(/[^0-9 -]/g,'')}" :placeholder="$t('tel')" v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item :label="$t('korean_name')" prop="korean_name">
            <!-- 韩国姓名 -->
            <el-input :placeholder="$t('korean_name')" v-model="ruleForm.korean_name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('en_name')" prop="en_name">
            <!-- 英文全名 -->
            <el-input :placeholder="$t('en_name')"  @input="(e)=>{ruleForm.en_name = e.replace(/[^a-zA-Z -]/g,'')}" v-model="ruleForm.en_name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('address')" prop="address">
            <!-- 地址 -->
            <el-input :placeholder="$t('address')" v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item :label="$t('customs')" prop="customs">
            <!-- 个人清关码 -->
            <el-input :placeholder="$t('customs')" v-model="ruleForm.customs"></el-input>
          </el-form-item>
          <el-form-item :label="$t('zip_code')" prop="zip_code">
            <!-- 邮编 -->
            <el-input :placeholder="$t('zip_code')" v-model="ruleForm.zip_code"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="RegistrationShow = false">取 消</el-button>
        <el-button type="primary" @click="user_update('ruleForm')">确 定</el-button>
        <!-- @click="submitEdit('ruleForm')" -->
      </span>
    </el-dialog>
    <el-dialog
      :title="$t('Modifying_account_passwords')"
      :visible.sync="payShow"
      width="60%"
      :before-close="payClose">
      <el-form :model="payForm" :inline="true" :rules="rulesPay" ref="payForm" label-width="100px" class="demo-ruleForm">
        <el-form-item :label="$t('Name_of_the_person_making_the_payment')" prop="name">
          <el-input :placeholder="$t('Name_of_the_person_making_the_payment')" v-model="payForm.name"></el-input>
        </el-form-item>
        <!-- 回款时间 -->
        <el-form-item :label="$t('remittance_date')" prop="name">
          <el-date-picker
            v-model="payForm.add_time"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :placeholder="$t('Select_date_time')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('Recharge_order_number')" prop="code">
          <!-- 充值单号 -->
          <el-input :placeholder="$t('Recharge_order_number')" v-model="payForm.code"></el-input>
        </el-form-item>
        <el-form-item :label="$t('account_number')" prop="account_number">
          <!-- 收款账号 -->
          <el-input :placeholder="$t('account_number')" v-model="payForm.account_number"></el-input>
        </el-form-item>

        <el-form-item :label="$t('recharge_amount')" prop="price">
          <!-- 充值金额 -->
          <el-input @input="(e)=>{payForm.price = e.replace(/[^0-9 .]/g,'')}" :placeholder="$t('recharge_amount')" v-model="payForm.price"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="payShow = false">取 消</el-button>
        <el-button @click="pay('payForm')" type="primary" >确 定</el-button>
        <!-- @click="submitEdit('ruleForm')" -->
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    login,
    user_index,
    user_update,
    user_recharge
  } from '@/utils/wqzApi'
  import headers from "@/components/header"
  export default {
      components:{
        headers,
      },
      data() {
        return {
          payShow:false,//充值对话框
          userInfo:{},
          RegistrationShow:false,
          rules:{
              "nickname": [
                { required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },
                { min: 2, max: 10, message: this.$t('string_length_check'), trigger: 'blur' }
              ], //昵称
              "password": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },
              { min: 6, max: 18, message: this.$t('password_length'), trigger: 'blur' }
              ], //密码
              "old_password": [
                { min: 6, max: 18, message: this.$t('password_length'), trigger: 'blur' },
                { validator: (rule, value, callback)=>{
                  if (value === '') {
                    callback(new Error('请再次输入密码'));
                  } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                  } else {
                    callback();
                  }
                }, trigger: 'blur' }
              ], //确认密码
              "korean_name":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },], //韩国姓名
              "en_name": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }], //英文全名
              "mobile": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//手机
              "customs":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//个人清关码
              "email":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }], //邮箱
              "code":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//编号
              "address":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//地址
              "tel": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//座机
              "zip_code": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//邮编
          },
          rulesPay:{
            "price": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },], //充值金额
            "code": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },], //充值单号
            "name": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },], //打款人姓名
            "account_number": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },], //收款账号
            "add_time": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },] //汇款时间
          },
          payForm:{
            "price": null, //充值金额
            "code": null, //充值单号
            "name": "", //打款人姓名
            "account_number": "", //收款账号
            "add_time": null //汇款时间
          },
          ruleForm:{
            "nickname": "", //昵称
            "korean_name": "", //韩国姓名
            "en_name": "", //英文全名
            "mobile": "", //手机
            "customs": "", //个人清关码
            "email": "", //邮箱
            "code": "", //编号
            "address": "", //地址
            "tel": "", //座机
            "zip_code": "" //邮编
          },
        }
      },
      mounted() {
        this.user_index()
      },
      methods:{
        payClose(){
          this.payShow = !this.payShow
        },
        pay(ref){
           this.$refs[ref].validate((valid) => {
              if (valid) {
                user_recharge(this.payForm).then(res=>{
                  console.log(res)
                  this.$message({
                    type:'success',
                    message:this.$t('public.Operation_successful')
                  })
                  this.payShow = !this.payShow
                }).catch(err=>{
                  this.$message({
                    type:'error',
                    message:err
                  })
                })
              } else {
                console.log('error submit!!');
                return false;
              }
            });

        },
        user_update(ref){
            var data = JSON.parse(JSON.stringify(this.ruleForm ))
            delete data.is_delete
            delete data.password
            delete data.balance
            delete data.gid
            delete data.code
           this.$refs[ref].validate((valid) => {
              if (valid) {
                user_update(data).then(res=>{
                  this.$message({
                    type:'success',
                    message:this.$t('public.Operation_successful')
                  })
                  this.user_index()
                  this.RegistrationShow = false
                })
              } else {
                console.log('error submit!!');
                return false;
              }
            });

            console.log(data , '用户信息')
        },
        handleClose(){
          this.RegistrationShow = !this.RegistrationShow
        },
        user_index(){
          user_index({}).then(res=>{
            this.userInfo = res.data
            this.ruleForm = {...this.ruleForm,...res.data}
            console.log(this.ruleForm , '提交信息')
          })
        }
      }

  }
</script>

<style lang="scss" scoped >

</style>
